<template>
	<m-layout title="线下充值记录" gap="20 30">
		<m-block spa="10 0 20" gap="20 30" v-for="(item,index) in listArr" :key="index">


			<view class="head flex-between">
				<view class="left flex">
					<m-icon type="bankrecode" size="34" spa="0 15 0 0"></m-icon>
					<text>{{ item.vtime || item.ctime  | mkfsTime }}</text>
				</view>
				<view class="right">
					<text class="fs26 ">{{statusType[item.state]}}</text>
				</view>
			</view>
			<view class="ul">
				<view class="li flex-between">
					<text>充值金额</text>
					<text>{{item.amount}}</text>
				</view>
				<view class="li flex-between">
					<text>银行流水号</text>
					<text>{{item.tradenum}}</text>
				</view>
				<view class="li flex flex-start">
					<text>充值凭证 ：</text>
					<m-image size="140" :src='item.transfervoucher' isPreview></m-image>
				</view>
				<m-block class="bhui flex" gap="10" bgColor="#FFEFF1" v-if="item.state==3">
					<m-icon type="icon-jingshi-shiyuan" color="#ff5546" size="32" spa="0 15 0 0"></m-icon>
					<text>驳回原因：{{item.desccontent}}</text>
				</m-block>
			</view>
		</m-block>
		<m-loading gap="100 0" :list="listArr" :pageIndex="pageIndex" :pageCount="pageCount" :loading="isLoading" />
	</m-layout>
</template>

<script>
	import { mapState } from 'vuex'
	import { tbvRegister, Getutb } from "@/api/Trade.js"
	export default {
		data() {
			return {
				listArr: [],
				pageIndex: 1,
				pageSize: 10,
				pageCount: 1,
				isLoading: false,
			};

		},
		computed: {
			...mapState({
				coinconfig: state => state.general.coinConfig,
				enum: state => state.general.enum,
			}),
			statusType() {
				return {
					1: '待处理',
					2: '已到账',
					3: '已驳回'
				}
			},
		},
		watch: {

		},
		onShow() {
			this.reset()
		},
		methods: {
			// 初始化
			reset() {
				this.pageCount = 1;
				this.pageIndex = 1;
				this.getData();
			},
			// 获取转账记录列表
			async getData() {
				if (this.pageIndex > this.pageCount) {
					return;
				}
				this.isLoading = true;
				const { list, pageCount, success } = await Getutb({
					pageSize: this.pageSize,
					pageIndex: this.pageIndex
				});
				this.isLoading = false;
				this.pageCount = pageCount;
				if (this.pageIndex <= 1) {
					this.listArr = list;
				} else {
					this.listArr = [...this.listArr, ...list];
				}
				this.pageIndex++;
				uni.stopPullDownRefresh();
			}
		},
		onPullDownRefresh() {
			this.reset();
		},
		onReachBottom() {
			this.reset();
			console.log("触底了");
		},
	}
</script>

<style lang="scss">
	.head {
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #DEDEDE;

		.left {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.right {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FC8C23;
		}
	}

	.ul {
		padding-top: 20rpx;

		.li {
			text:nth-of-type(1) {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #666666;
			}

			text:nth-of-type(2) {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}

		.li+.li {
			padding-top: 15rpx;
		}

		.bhui {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #F43040;
		}
	}
</style>